<template>
  <div class="app">
    <!-- 引入 WebSocket 服务组件 - 完全独立运行，无需任何props和事件绑定 -->
    <!-- <WebSocketService /> -->
    <!-- 引入音频流播放组件 -->
    <AudioStreamPlayer />
    <!-- 监听子组件的事件，并创建 ref 引用 -->
    <Sidebar 
      ref="sidebarRef"
      :selected-session-id="currentChatId" 
      @session-selected="handleSessionSelected" 
    />
    <!-- 将状态和事件处理器传递给子组件 -->
    <MainContent 
      :is-chat-active="isChatActive"
      :current-chat-id="currentChatId"
      :selected-session-character-name="currentCharacterName" 
      @message-sent="handleMessageSent"
      @new-chat-clicked="resetToNewChat"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import Sidebar from './components/Sidebar.vue'
import MainContent from './components/MainContent.vue'
// import WebSocketService from './components/WebSocketService.vue'
import AudioStreamPlayer from './components/AudioStreamPlayer.vue'

// 统一管理核心状态
const isChatActive = ref(false)
const currentChatId = ref<string | null>(null)
// 1. 新增一个 ref 来存储当前会话的角色名称
const currentCharacterName = ref<string | null>(null)

const sidebarRef = ref<InstanceType<typeof Sidebar> | null>(null)

// 定义会话对象的类型，与 Sidebar 中保持一致
interface ChatSession {
  id: string;
  characterName: string;
}

interface NewChatPayload {
  newChatId: string;
  characterName: string;
}

// 2. 修改处理器，接收完整的 session 对象
const handleSessionSelected = (session: ChatSession) => {
  currentChatId.value = session.id
  currentCharacterName.value = session.characterName // 存储角色名称
  isChatActive.value = true
}

// 修改 handleMessageSent 以处理两种情况
const handleMessageSent = (payload?: NewChatPayload) => {
  // **核心修改：**
  // 如果 payload 存在，意味着一个新会话刚刚被创建
  if (payload) {
    currentChatId.value = payload.newChatId
    currentCharacterName.value = payload.characterName
    isChatActive.value = true // 确保激活聊天
  }
  
  // 无论是不是新消息，都刷新侧边栏列表
  nextTick(() => {
    sidebarRef.value?.fetchChatList()
  })
}

// 修改点 2: 新增方法，用于重置所有会话相关的状态
const resetToNewChat = () => {
  console.log('App.vue 接收到 new-chat-clicked 事件，正在重置状态...')
  isChatActive.value = false       // 隐藏聊天界面，显示欢迎语
  currentChatId.value = null         // 清空当前会话ID
  currentCharacterName.value = null // 清空当前角色名
}
</script>

<style scoped>
.app {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}
</style>